<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" width="60%">
      <span slot="title" class="dialog-title">
        <p>{{ message.username }}({{ message.realName ? message.realName : '未实名' }}<el-button type="text"
            v-if="message.realName" @click="handleRealName(record)">详情</el-button>)的团队</p>
        <el-button v-if="message.hasParent" type="text" @click="getParent(message.id, 1)">查看上级</el-button>

      </span>

      <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column align="center" label="用户ID" prop="id">
          <template slot-scope="scope">
            {{ scope.row.id }}
            ({{ scope.row.realName ? scope.row.realName : "未实名" }}
            <el-button type="text" v-if="scope.row.realName" @click="handleRealName(scope.row)">详情</el-button>)
          </template>

          <!-- {{ scope.row.realName ? scope.row.realName : "未实名" }} -->
          <!-- <el-button type="text" v-if="scope.row.realName" @click="handleRealName(scope.row)">详情</el-button> -->
        </el-table-column>
        <el-table-column label="昵称" align="center" prop="username" />
        <el-table-column label="团队等级" align="center">
          <template slot-scope="scope">
            {{ Number(scope.row.teamRate * 100).toFixed(2) }}%

          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="250">
          <template slot-scope="scope">
            <el-button v-if="scope.row.hasChildren" type="text" @click="handleShowInfo(scope.row, 0)">查看下级</el-button>
            <el-button type="text" @click="handleHistory(scope.row)">流水记录</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="pagination">
       <el-pagination
         :current-page.sync="queryParams.pageNum"
         :page-sizes="[10, 20, 30, 40]"
         :page-size.sync="queryParams.pageSize"
         layout="total, sizes, prev, pager, next, jumper"
         :total="total"
         @size-change="fetchData"
         @current-change="fetchData"
       />
     </div> -->
    </el-dialog>
    <product ref="product" />
    <add ref="add" />
    <children ref="children" />
    <realInfo ref="realInfo" />

  </div>
</template>
<script>
import { getUserSiblings } from '@/api/table'
import product from './product.vue'
import add from './add.vue'
import children from './children.vue'
import realInfo from './realInfo.vue'

export default {
  components: {
    product,
    add,
    children,
    realInfo
  },
  data() {
    return {
      dialogVisible: false,
      listLoading: true,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: '',
        type: ''
      },
      message: {
        username: '',
        id: '',
        hasParent: ''
      },
      list: [],
      record: {}

    }
  },
  created() {

  },
  methods: {
    handleHistory(record) {
      this.$refs.children.show(record)
    },
    handleRealName(record) {
      this.$refs.realInfo.show(record)
    },
    async show(record, type) {
      console.log(record)
      this.queryParams.type = type
      this.dialogVisible = true
      this.record = record
      this.message.username = record.username
      this.message.hasParent = record.hasParent
      this.message.id = record.id
      this.message.realName = record.realName

      this.fetchData()
    },
    async fetchData() {
      this.queryParams.userId = this.record.id
      const response = await getUserSiblings(this.queryParams)
      this.list = response.data

      this.listLoading = false
      // this.total = response.data.total
    },
    async handleShowInfo(e, type) {
      this.message.username = e.username
      this.message.id = e.id
      this.message.hasParent = e.hasParent
      this.message.realName = e.realName
      this.record = e
      this.listLoading = true
      const response = await getUserSiblings({ userId: e.id, type })
      this.list = response.data
      this.listLoading = false
    },
    async getParent(id, type) {
      this.listLoading = true
      const response = await getUserSiblings({ userId: id, type })

      if (response.data.length) {
        // this.message.username = response.data[0].username
        // this.message.hasParent = response.data[0].hasParent
        // this.message.id = response.data.inviteCode
        this.handleShowInfo(response.data[0], 0)
      }
    },
    setResionTxt(index) {
      let str = ''
      switch (index) {
        case 'withdrawal':
          str = '提现'
          break
        case 'recharge':
          str = '充值'
          break
        case 'transfer':
          str = '转账'
          break
        case 'commission':
          str = '手续费'
          break
        case 'investEarnings':
          str = '收益'
          break
        case 'invest':
          str = '理财'
          break
        case 'invest_earnings':
          str = '投资返利'
          break
        case 'receive_transfer':
          str = '收到转账'
          break
      }
      return str
    },
    setStateTxt(index) {
      let str = ''
      switch (index) {
        case 'progressing':
          str = '进行中'
          break
        case 'end':
          str = '已结束'
          break
      }
      return str
    }

  }
}
</script>
<style scoped lang="scss">
.dialog-title {
  display: flex;
  align-items: center;
  position: relative;

  button {
    margin-left: 20px;
  }
}

>>>.el-dialog__body {
  padding: 0 !important;
}

.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.list {
  .item {
    border: 1px solid #c0ccda;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-top: 10px;

    >div {
      display: flex;

      img {
        margin-right: 15px;
      }
    }

    >i {
      font-size: 20px;
      cursor: pointer;
    }
  }
}
</style>
